import React from 'react';
import {Router, Route, Link} from 'react-router';

import utils from '../../js/utils';
import config from '../../../config/config';



class ColumnNew extends React.Component {
  constructor () {
    super();

    this.state = {
      nav: ["文章", "图集", "视频", "音频", "词库", "题库"],

      redirect_status: 0,
      arctype: {},
      reid: 0
    }

    this.changeRedirectStatus = this.changeRedirectStatus.bind(this);
    this.submit = this.submit.bind(this);
  }

  componentDidMount () {
    let _this = this;
    let typeid = this.props.params.typeid;
    if (typeid) {
      utils.post("/get_arctype_from_typeid", {typeid}, function (res) {
        if (parseInt(res.code) == 200) {
          let arctype = res.arctype;
          _this.setState({
            arctype: res.arctype,
            redirect_status: res.arctype.redirect_status ? 1 : 0
          })

          _this.refs.typename.value = arctype.typename;
          _this.refs.redirect_url.value = arctype.redirect_url;
          _this.refs.description.value = arctype.description;
          _this.refs.content.value = arctype.content;
        }
      })
    }

    let reid = this.props.params.reid;
    if (reid) {
      _this.setState({
        reid: reid
      })

      utils.post("/get_arctype_from_typeid", {typeid: reid}, function (res) {
        if (parseInt(res.code) == 200) {
          let arctype = res.arctype;
          _this.setState({
            arctype: res.arctype
          })
        }
      })
    }
  }

  changeRedirectStatus () {
    this.setState({
      redirect_status: this.state.redirect_status == 0 ? 1 : 0
    })
  }

  submit () {

    let typename = this.refs.typename.value.trim();
    let redirect_url = this.refs.redirect_url.value.trim();
    let description = this.refs.description.value.trim();
    let content = this.refs.content.value.trim();

    if (!utils.checkValue(typename)) {
      $(this.refs.typename).siblings('p[class="alert-account"]').text("请填写分类名称").show();
      $(this.refs.typename).addClass('warning-account');
      return
    }

    $(this.refs.typename).siblings('p[class="alert-account"]').text("").hide();
    $(this.refs.typename).removeClass('warning-account');

    if (this.state.redirect_status == 1 && !utils.checkValue(redirect_url)) {
      $(this.refs.redirect_url).siblings('p[class="alert-account"]').text("请填写跳转链接").show();
      $(this.refs.redirect_url).addClass('warning-account');
      return
    }

    $(this.refs.redirect_url).siblings('p[class="alert-account"]').text("").show();
    $(this.refs.redirect_url).removeClass('warning-account');

    let sendData = {
      typename,
      redirect_url,
      description,
      content,
      channel: this.props.params.id,
      reid: this.state.reid,
      redirect_status: this.state.redirect_status == 0 ? false : true
    }

    let _this = this;

    let typeid = this.props.params.typeid;
    if (typeid) {
      sendData.typeid = typeid;
      utils.post("/update_column", sendData, function (res) {
        $('.modal-body').text(res.errmsg);
        $('#myModal').modal('show');
      })
    }
    else {
      utils.post("/save_column", sendData, function (res) {

        console.log(res);
        if (parseInt(res.code, 10) == 500) {
          $('.modal-body').text(res.errmsg);
          $('#myModal').modal('show');
          return
        }

        if (parseInt(res.code, 10) == 50001) {
          $(_this.refs.typename).siblings('p[class="alert-account"]').text(res.errmsg).show();
          $(_this.refs.typename).addClass('warning-account');
          return
        }

        if (parseInt(res.code, 10) == 200) {
          $('.modal-body').text(res.errmsg);
          $('#myModal').modal('show');
          window.location.href = "/#/content";
        }
      })
    }
  }

  render () {
    return (
      <div>
        <div className='bamboo-nav'>当前位置：内容管理 > 新增分类 > {this.state.nav[this.props.params.id]}</div>
        <div className="bamboo-column-new">
          {/* <h3>增加{this.state.nav[this.props.params.id]}分类</h3> */}
          <p style={{display: parseInt(this.state.reid, 10) == 0 ? "none" : "block"}}>上级分类：{this.state.arctype.typename}</p>
          <div>
            <h3>分类名称</h3>
            <input type="text" className='form-control' ref="typename"/>
            <p className="alert-account"></p>
          </div>
          <div style={{display: "none"}}>
            <h3>
              跳转至新的链接
              <img onClick={this.changeRedirectStatus} className="bamboo-switch-icon" src={this.state.redirect_status == 0 ? "/static/icon/switch_off.png" : "/static/icon/switch_on.png"} />
            </h3>
            <input type="text" className='form-control' ref="redirect_url" placeholder="http://"/>
            <p className="alert-account"></p>
          </div>
          <div style={{display: "none"}}>
            <h3>描述</h3>
            <textarea className='form-control' ref="description"></textarea>
            <p className="alert-account"></p>
          </div>
          <div style={{display: "none"}}>
            <h3>内容</h3>
            <textarea className='form-control' ref="content"></textarea>
            <p className="alert-account"></p>
          </div>
          <div>
            <a className="bamboo-btn-green" href="javascript:void(0)" onClick={this.submit}>
              {this.props.params.typeid ? "更新分类" : "确认新增"}
            </a>
          </div>
        </div>
      </div>
    )
  }
}

export default ColumnNew;
